<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>
    /* 
      伪元素：
          1.伪元素会创造一些不存在文档结构的元素，
          它是不可复制，也没有具体标签名
          2.伪类表示已存在元素的状态，伪元素是不存在dom树中，说白了不能被js操作
      ::before ，在元素内部的前面创建一个伪元素
            content属性:表示需要插入的内容
              注意，在使用::before或者::after时必须使用content属性，不然会失效
      ::after ,在元素内部的后面创建一个伪元素
              */
    .box::before{
      display: block;
      content: '开头';
    }
    .box::after{
      display: inline-block;
      content: '结尾';
      width: 50px;
      height: 50px;
      background-color: rgba(0, 0, 0, 0.1);
    }

  </style>
  <div class="box">内容</div>

  <style>
    .username::placeholder{
      color: pink;
    }
  </style>
  <input class="username" type="text" placeholder="请输入用户名/手机号">
</body>
</html>